<template>
    <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>数据审核</el-breadcrumb-item>
        <el-breadcrumb-item>表格审核</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>

    <!-- 资料主管 资料 -->
      <div class="docSup" v-if="arr.indexOf('docSup') > -1">
        <el-row>
          <el-col :span="17"><span class="title">资料主管-资料表</span></el-col>
          <el-col :span="7">
            <el-input placeholder="请输入资料表名称" v-model="docQuery.query" @keyup.enter="getDocument()" clearable @clear="getDocument()">
              <template #append> <el-button icon="el-icon-search" @click="getDocument()"></el-button></template>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="document" border stripe style="margin-bottom:15px">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="excel名称" prop="documentContentName"></el-table-column>
          <el-table-column label="上报时间" prop="createTime"><template v-slot='scope'>{{scope.row.updateTime}}</template></el-table-column>
          <el-table-column label="上报员" prop="reportUserId"></el-table-column>
          <el-table-column label="操作" min-width="150">
          <template v-slot="scope">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="showExcel(scope.row)" >查看excel表</el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="acceptDoc(scope.row)" >通过</el-button>
            <el-button type="danger" icon="el-icon-edit" size="mini" @click="rejectDoc(scope.row)" >不通过</el-button>
          </template>
        </el-table-column>
        </el-table>
        <el-config-provider :locale="locale">
          <el-pagination @size-change="docSizeChange" @current-change="docCurChange" :current-page="docQuery.pagenum" :page-sizes="[5,10,20]" :page-size="docQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="docTotal" ></el-pagination>
        </el-config-provider>
        <el-dialog title="数据审核" v-model="rejDocDiaVisible" width="50%" @close="rejDocDiaClosed">
          <el-form ref="rejDocForm" :model="curDoc" label-width="80px" width="100%">
            <el-form-item label="驳回原因" prop="reason"><el-input type="text" v-model="curDoc.reason"></el-input></el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="rejDocDiaVisible = false">取消</el-button>
              <el-button type="primary" @click="rejDoc">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      

      
    </el-card>
    </div>
</template>

<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
  data(){
    return{
      arr:['docSup','expSup','proSup'],
      document:[],
      docQuery:{
      query:"",
      pagenum:1,
      pagesize:5
      },
      docTotal:0,
      rejDocDiaVisible:false,
      curDoc:{},
    }
  },
    setup() {
      return {
        locale: zhCn
      };
    },
    methods:{
      getMsgFormSon(){
        console.log("getMsgFormSon");
      }
    },
    mounted(){
      if(this.arr.indexOf('docSup') > -1){ this.getDocument(); }
    //   if(this.arr.indexOf('expSup') > -1){ this.getExperiment(); }
    //   if(this.arr.indexOf('proSup') > -1){ this.getProcess(); }
    },
    computed:{
      DateFormat(){
        return function(date){
          return dateFormatFun(date,2);
        };
      }
    },
    methods:{
      async getDocument() {
        const { data: res } = await this.$http.get("documentSupervisor/getReviewDocumentExcel",{params: this.docQuery});
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.document = res.data.list;
        this.docTotal = res.data.total;
      },
      docSizeChange(newSize) {
        this.docQuery.pagesize = newSize;
        this.getDocument();
      },
      docCurChange(newPage) {
        this.docQuery.pagenum = newPage;
        this.getDocument();
      },
      async acceptDoc(document){
        const confirmRes = await this.$confirm("确认通过该条数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
        if (confirmRes !== "confirm") {return this.$message.info("取消通过");}
        let formData = new FormData();
        formData.append("id",document.id)
        const { data: res } = await this.$http.post("documentSupervisor/acceptDocumentExcel",formData);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.getDocument()
      },
      rejectDoc(document){
        this.curDoc = document;
        this.rejDocDiaVisible = true;
      },
      rejDocDiaClosed(){ this.$refs.rejDocForm.resetFields()},
      async rejDoc(){
        let formData = new FormData();
        formData.append('id',this.curDoc.id);
        formData.append('reason',this.curDoc.reason);
        const { data: res } = await this.$http.post('documentSupervisor/rejectDocumentExcel',formData)
        if (res.code !== 200) return this.$message.error(res.msg);
        this.rejDocDiaVisible = false 
        this.getDocument()
      },
      showExcel(excel){
        this.$message.warning("在线预览excel");
      },
    }
}
</script>

<style lang="less" scoped>
.title{
    font-size: 14px;
    color:#666;
    display: block;
    padding:10px 0 0 2px;
  }
</style>